<template>
  <!-- 查询表单 -->
  <div class="search" v-if="'query' == props.mode">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="tname" placeholder="分类查询"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button type="primary" @click="requery">查询</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
          <el-button type="success" @click="showadd">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>

  <!-- 数据呈现的部分 -->
  <div>
    <div>
      <el-table :data="list">
        <el-table-column
          label="分类编号"
          prop="stid"
          v-if="'query' == props.mode"
        ></el-table-column>
        <el-table-column label="分类名称" prop="tname"></el-table-column>
        <el-table-column label="分类简介" prop="intro"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="'query' == props.mode"
              type="warning"
              size="small"
              @click="showmodify(scope.row)"
              >修改</el-button
            >
            <el-button
              v-if="'query' == props.mode"
              type="danger"
              size="small"
              @click="del(scope.row)"
              >删除</el-button
            >
            <el-button
              v-if="'selector' == props.mode"
              type="success"
              size="small"
              @click="selectType(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页的部分 -->
    <div class="page">
      <el-pagination
        v-model:current-page="page.pageNumber"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[2, 5, 10, 15]"
        @size-change="query"
        layout="prev,pager,next,total,sizes"
        @current-change="query"
      >
      </el-pagination>
    </div>

    <!-- 添加的弹窗 -->
    <div>
      <el-dialog v-model="avisible" @closed="requery" title="添加软件分类">
        <div>
          <el-form>
            <el-form-item>
              <el-input v-model="addInfo.tname" placeholder="分类名称"></el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                v-model="addInfo.intro"
                placeholder="分类描述"
                type="textarea"
                rows="5"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <el-button type="success" @click="add">添加</el-button>
          <el-button type="danger" @click="avisible = false">取消</el-button>
        </template>
      </el-dialog>
    </div>

    <!-- 修改的弹窗 -->
    <div>
      <el-dialog v-model="mvisible" @closed="requery" title="修改软件分类信息">
        <div>
          <el-form>
            <el-form-item>
              <el-input placeholder="分类名称" v-model="modifyInfo.tname"></el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                placeholder="分类描述"
                v-model="modifyInfo.intro"
                type="textarea"
                rows="5"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <el-button type="warning" @click="modify">修改</el-button>
          <el-button type="danger" @click="mvisible = false">取消</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from './../js/ajax'
import { tools } from './../js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

// 视图的呈现模式,query,selector
const props = defineProps(['mode'])
const emits = defineEmits(['type-selected'])

//#region 选择的部分
const selectType = (info) => {
  console.log('选中的分类', info)
  emits('type-selected', info)
}
//#endregion

//#region 查询的部分
const page = ref({
  pageSize: 5,
  pageNumber: 1,
})

const tname = ref('')
const list = ref([])

const query = () => {
  api.get(
    `/crud/softwaretype/${page.value.pageSize}/${page.value.pageNumber}`,
    { tname: tname.value },
    (data) => {
      if (data.success) {
        list.value = data.data.data
        page.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '查询失败')
    },
  )
}

onMounted(() => {
  query()
})
//#endregion

//#region 搜索部分的功能
// 查询
const requery = () => {
  page.value.pageNumber = 1
  query()
}
// 重置
const reset = () => {
  tname.value = ''
  page.value.pageNumber = 1
  query()
}
// 添加的部分
const addInfo = ref({
  tname: '',
  intro: '',
})
const avisible = ref(false)
// 细节：清空添加的input中的内容
const showadd = () => {
  addInfo.value = {
    tname: '',
    intro: '',
  }
  avisible.value = true
}
const add = () => {
  api.post('/crud/softwaretype', addInfo.value, (data) => {
    ElMessageBox.alert(data.message, '添加结果')
    if (data.success) {
      addInfo.value = {
        tname: '',
        intro: '',
      }
      avisible.value = false
    }
  })
}
// 思考题：如果没有执行添加的动作，关闭的时候就不要调用requery方法了
//#endregion

//#region 操作部分按钮的功能

// 修改的功能
const mvisible = ref(false)
const modifyInfo = ref({
  tname: '',
  intro: '',
})
const showmodify = (info) => {
  mvisible.value = true
  modifyInfo.value = tools.mergeJson(info)
}
const modify = () => {
  api.put('/crud/softwaretype', modifyInfo.value, (data) => {
    ElMessageBox.alert(data.message, '修改结果')
    if (data.success) {
      modifyInfo.value = {
        tname: '',
        intro: '',
      }
      mvisible.value = false
    }
  })
}

// 删除的功能
const del = (info) => {
  ElMessageBox.alert(`是否要删除: ${info.tname} 吗?`, '删除软件分类', {
    type: 'warning',
  })
    .then(() => {
      api.delete(`/crud/softwaretype/${info.stid}`, {}, (data) => {
        ElMessage({
          message: data.message,
          type: data.success ? 'success' : 'error',
        })
        requery()
      })
    })
    .catch(() => {})
}

//#endregion
</script>

<style scoped>
.search {
  display: flex;
  justify-content: flex-end;
  margin-left: 1rem;
}
</style>
